<template>
	<view class="content">
		<lxc_nav text='交易记录' :bacicon="'#fff'"></lxc_nav>
		<view id="box">
			<view class="Switch_button">
				<view :class="[currentIndex === 1 ? 'Switch_left' : 'Switch_left1']">
					<text @click="leftcilck">交易日志</text>
					<view :class="[currentIndex === 1 ? 'clear' : 'clear1']" @click="leftcilck">
					</view>
				</view>
				<view :class="[currentIndex === 0 ? 'Switch_right' : 'Switch_right1']">
					<text @click="rightcilck">交易订单</text>
					<view :class="[currentIndex === 0 ? 'clear' : 'clear1']" @click="leftcilck">
					</view>
				</view>
			</view>
			<view class="Order" v-if="currentIndex===0" @click="xiangqing">

				<text>346.123</text><text>USDT</text></br>
				<text>2021-08-10 11:12:56</text>
				<view class="Orderright">
					<text id="succend">成功</text>
					<image src="../../static/transaction/gengd.png" mode=""></image>
				</view>
			</view>
			
			<view class="Log" v-if="currentIndex===1">
				<text>2021-08-10 11:12:56</text>
				</br>
				<text>首单开单失败：huobipro</text>
				</br>
				<text>{"status":"error","err-code":"api-signature-not-valid","err-msg":"Signature not valid: API key has
					expired [API Key已经过期]","data":null}</text>
			</view>
			<view class="Log" v-if="currentIndex===1">
				<text>2021-08-10 11:12:56</text>
				</br>
				<text>首单开单失败：余额不足</text>
				</br>
				<text></text>
			</view>
		</view>
	</view>
</template>

<script>
	import lxc_nav from '../../components/nav.vue'
	export default {
		components: {
			lxc_nav
		},
		data() {
			return {
				currentIndex: 1,
			}
		},
		onLoad() {
			this.currentIndex = 1
		},
		methods: {
			leftcilck() {
				this.currentIndex = 1
			},
			rightcilck() {
				this.currentIndex = 0
			},
			// 详情
			xiangqing(){
				uni.navigateTo({
					url: '/pages/transaction/Details'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F5F6F8;
	}

	.Log {
		width: 96vw;
		margin-left: 2vw;
		padding-left: 2vw;
		padding-right: 2vw;
		position: relative;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 10rpx;
	}

	.Log text:nth-child(1) {
		width: 249rpx;
		height: 19rpx;
		display: inline-block;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-top: 26rpx;
	}

	.Log text:nth-child(3) {
		display: inline-block;
		height: 24rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 30rpx;
	}

	.Log text:nth-child(5) {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 30rpx;
		display: inline-block;
		margin-bottom: 26rpx;
	}























	#box {
		position: relative;
		// color: $u-content-color;
		width: 100vw;
		margin-top: 88rpx;
	}

	.Switch_button {
		height: 83rpx;
		width: 100vw;
		display: flex;
	}

	.Switch_left {
		margin: 0 auto;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-top: 29rpx;
	}

	.Switch_left1 {
		margin: 0 auto;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #999999;
		margin-top: 29rpx;
	}

	.Switch_right {
		margin: 0 auto;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-top: 29rpx;
	}

	.Switch_right1 {
		margin: 0 auto;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #999999;
		margin-top: 29rpx;
	}

	.clear {
		width: 28rpx;
		height: 4rpx;
		background: #1989FA;
		border-radius: 2rpx;
		margin: 0 auto;
	}

	.Order {
		width: 96vw;
		height: 140rpx;
		margin-left: 2vw;
		padding-left: 2vw;
		padding-right: 2vw;
		position: relative;
		background-color: #FFFFFF;
		border-radius: 20px;
		margin-bottom: 10rpx;
	}

	.Order text:nth-child(1) {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		position: relative;
		top: 28rpx;
	}

	.Order text:nth-child(2) {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		position: relative;
		top: 28rpx;
		left: 20rpx;
	}

	.Order text:nth-child(4) {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		position: relative;
		top: 33rpx;
	}

	.Orderright {
		height: 40rpx;
		width: 100rpx;
		position: absolute;
		right: 2vw;
		top: 50rpx;
	}

	.Order image {
		position: absolute;
		height: 24rpx;
		width: 14rpx;
		right: 0rpx;
		top: 8rpx;
		display: inline-block;
	}

	#succend {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #1989FA;
		position: absolute;
		top: 0rpx;
		right: 25rpx;
	}
</style>
